<template>
  <view :class="theme">
    <view class="m-30 fd-row flex-wrap bg-3">
      <view v-for="item in goods.list" :key="item.id" style="width: calc(50% - 20rpx); margin: 0 10rpx 30rpx;"
        class="bg-2 br-10 oh">
        <u-image width="100%" height="340" :src="item.goods_image" />
        <text class="p-24 fs-28 color-16 ellipsis fw-700">{{ item.goods_name }}</text>
      </view>
    </view>
    <view class="mt-30 mb-30 ai-center">
      <u-image v-if="!goods.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
        src="/static/img/blank.png" mode="aspectFit" />
      <u-loadmore :status="goods.status" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const goods = reactive({
  status: "nomore",
  list: [] as AnyObject[]
});

onLoad(() => {
  uni.request({
    url: "/userBindGoods",
    success({ data }: any) {
      if (!Array.isArray(data)) return;
      goods.list = data;
    }
  })
});

</script>

<style lang="scss" scoped>
// scss
</style>